<template>
  <view class="container">
    <view class="input-container">
      <input v-model="username" type="text" placeholder="请输入用户名" />
    </view>
    <view class="input-container">
      <input v-model="password" type="password" placeholder="请输入密码" />
    </view>
    <view class="btn-container">
      <button @click="login">登录</button>
    </view>
    <view class="link-container">
      <text @click="goToRegister" class="register-link">没有账号？去注册</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    login() {
      // 在这里执行登录逻辑，可以发送请求到后端验证用户名和密码
      // 例如：
      // axios.post('/api/login', {
      //   username: this.username,
      //   password: this.password
      // }).then(response => {
      //   // 处理登录成功的逻辑
      // }).catch(error => {
      //   // 处理登录失败的逻辑
      // });
    },
    goToRegister() {
      // 跳转到注册页面，可以使用 uni.navigateTo 或 uni.redirectTo
      // 例如：
      // uni.navigateTo({
      //   url: '/pages/register/register'
      // });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.input-container {
  margin-bottom: 20px;
}

input {
  width: 200px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn-container {
  margin-top: 20px;
}

button {
  width: 120px;
  height: 40px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.link-container {
  margin-top: 20px;
}

.register-link {
  color: #007bff;
  cursor: pointer;
}
</style>
